<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,minimal-ui"/>
  <title>GA Gui</title>

  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/bootstrap-theme.css" rel="stylesheet">
  <style>
    textarea {
      font-family: monospace;
      width: 100%;
      height: 400px;
    }

    .viewport {
      flex: 1;
      text-align: center;
      cursor: crosshair;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .scroller {
      background: #F5F5EC;
      flex: 1;
      overflow: auto;
    }

    .toolbox-panel {
      width: 360px;
    }

    .toolbox {
      flex: 1;
    }

    #spec-pane, #output-pane,#rank-pane {
      padding: 7px;
    }

    .piece {
      display: inline-block;
      margin: 5px;
      border: 1px solid grey;
      font-family: monospace;
      text-align: center;
      overflow: visible;
      border-radius: 3px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
      /* disable text selection */
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      cursor: pointer;
    }

    .piece:focus {
      background: rgba(200, 200, 255, 0.2);
    }

    .piece.used {
      tab-index: -1;
    }
  </style>
</head>
<body style="position: static; display: flex;">
<div class="container"
     style="flex: 1; display: flex; flex-direction: column; top:0; left:0; right: 0;bottom: 0; position: absolute; width: auto; height: auto; margin: 10px;">

  <div class="row" style="flex: 1; display: flex; flex-direction: row; min-height: 0">
    <div class="toolbox-panel" style="display: flex; flex-direction: column;">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#toolbox" data-toggle="tab">工具箱</a></li>
        <li><a href="#spec-pane" data-toggle="tab">输入文件</a></li>
        <li><a href="#output-pane" data-toggle="tab">输出文件</a></li>
        <li><a href="#rank-pane" data-toggle="tab">points汇总</a></li>
      </ul>
      <div class="tab-content"
           style="flex:1; display: flex; flex-direction: column; justify-content: flex-start; overflow: auto">
        <div class="toolbox tab-pane active" id="toolbox">
        </div>
        <div class="tab-pane" id="spec-pane">
          <textarea id="spec" disabled="disabled"></textarea>

<!--
          <div class="btn-group" style="float: right">
            <button id="update-button" class="btn btn-default">更新</button>
          </div>
-->
        </div>
		<div class="tab-pane" id="rank-pane">
		
<table class="table table-responsive">
  <tr>
    <th class="col-md-4">input文件</th>
    <th class="col-md-4">你的得分</th>
    <th class="col-md-4">最高得分</th>
  </tr>
<?php
for($i=1;$i<=10;$i++)
{
?>
  <tr>
    <td>input{{$i}}</td>
    <td><?php if(!isset($input[$i]))echo "未提交";else echo $input[$i]/100;?></td>
	<td>{{$max[$i]/100}}</td>
  </tr>
<?php
}
?>
</table>
		</div>
		
        <div class="tab-pane" id="output-pane">
          <textarea id="output"></textarea>

          <div class="text-right">
            <div class="btn-group">
              <button id="update-map-button" class="btn btn-default">更新</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="viewport">
      <div class="btn-toolbar" style="margin-bottom: 7px;">
          <div class="btn-group" id="update-to">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">输入文件 <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">input1.txt</a></li>
              <li><a href="#">input2.txt</a></li>
              <li><a href="#">input3.txt</a></li>
              <li><a href="#">input4.txt</a></li>
              <li><a href="#">input5.txt</a></li>
              <li><a href="#">input6.txt</a></li>
              <li><a href="#">input7.txt</a></li>
              <li><a href="#">input8.txt</a></li>
              <li><a href="#">input9.txt</a></li>
              <li><a href="#">input10.txt</a></li>
            </ul>
          </div>

        <div class="btn-group">
          <button id="undo-button" type="button" class="btn btn-default">撤销
          </button>
          <button id="redo-button" type="button" class="btn btn-default">重做
          </button>
          <button id="reset-button" type="button" class="btn btn-danger">重置
          </button>
        </div>
        <div class="btn-group">

              <button id="submit-button" class="btn btn-primary">提交</button>
        </div>
      </div>
      <h3 style="margin:7px; position:absolute;"><span id="nowfile"></span>  总分: <span id="score"></span></h3>

      <div class="scroller">
        <canvas style="width: 1000px; height: 1000px;" id="main-canvas"></canvas>
      </div>
    </div>
  </div>
</div>
</body>


<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script src="/js/doc.js"></script>
<script src="/js/create.js"></script>
<script src="/js/reset.js"></script>
<script src="/js/main.js"></script>
</html>
